<template>
  <div class="min-h-screen py-8 px-4 sm:px-6 lg:px-8">
    <div class="max-w-7xl mx-auto">
      <!-- 页面标题 -->
      <div class="text-center mb-12">
        <h1 class="text-4xl font-bold mb-4 tech-text">View Transitions API</h1>
        <p class="text-gray-300 text-lg">
          创建平滑的页面过渡动画，提升用户体验
        </p>
      </div>

      <!-- 浏览器支持提示 -->
      <div v-if="!isSupported" class="tech-card mb-8 border-yellow-600">
        <div class="flex items-center mb-4">
          <i class="i-carbon-warning text-yellow-500 text-xl mr-3"></i>
          <h3 class="text-xl font-semibold text-yellow-500">浏览器支持提示</h3>
        </div>
        <p class="text-gray-300">
          您的浏览器不支持 View Transitions API。此功能需要 Chrome 111+ 或其他支持的现代浏览器。
        </p>
      </div>

      <!-- 基础过渡示例 -->
      <div class="tech-card mb-8">
        <h2 class="text-2xl font-semibold mb-6 text-white">基础过渡示例</h2>
        
        <div class="bg-gray-800 rounded-lg p-8 mb-6">
          <div 
            :style="{ 
              backgroundColor: currentColor,
              transition: 'background-color 0.3s'
            }"
            class="rounded-lg p-12 text-center"
          >
            <h3 class="text-3xl font-bold text-white mb-4">{{ currentText }}</h3>
            <p class="text-white text-lg">当前状态: {{ currentState }}</p>
          </div>
        </div>

        <div class="flex gap-4 flex-wrap">
          <button
            @click="transitionColor('red', '红色')"
            class="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg transition-colors"
          >
            <i class="i-carbon-color-palette mr-2"></i>
            切换到红色
          </button>

          <button
            @click="transitionColor('blue', '蓝色')"
            class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg transition-colors"
          >
            <i class="i-carbon-color-palette mr-2"></i>
            切换到蓝色
          </button>

          <button
            @click="transitionColor('green', '绿色')"
            class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg transition-colors"
          >
            <i class="i-carbon-color-palette mr-2"></i>
            切换到绿色
          </button>

          <button
            @click="transitionColor('purple', '紫色')"
            class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg transition-colors"
          >
            <i class="i-carbon-color-palette mr-2"></i>
            切换到紫色
          </button>
        </div>
      </div>

      <!-- 卡片翻转过渡 -->
      <div class="tech-card mb-8">
        <h2 class="text-2xl font-semibold mb-6 text-white">卡片翻转过渡</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div
            v-for="card in cards"
            :key="card.id"
            @click="flipCard(card.id)"
            class="bg-gray-800 rounded-lg p-6 cursor-pointer hover:scale-105 transition-transform"
            :style="{ viewTransitionName: `card-${card.id}` }"
          >
            <div v-if="!card.flipped">
              <div class="text-4xl mb-4 text-center">{{ card.icon }}</div>
              <h3 class="text-xl font-semibold text-white text-center mb-2">{{ card.title }}</h3>
              <p class="text-gray-400 text-center text-sm">点击查看详情</p>
            </div>
            <div v-else>
              <h3 class="text-xl font-semibold text-white mb-4">{{ card.title }}</h3>
              <p class="text-gray-300 text-sm leading-relaxed">{{ card.description }}</p>
              <p class="text-tech-accent text-sm mt-4">点击返回</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 列表重排序 -->
      <div class="tech-card mb-8">
        <h2 class="text-2xl font-semibold mb-6 text-white">列表重排序动画</h2>
        
        <div class="flex gap-4 mb-6">
          <button
            @click="sortListBy('name')"
            class="tech-button"
          >
            <i class="i-carbon-text-sort-ascending mr-2"></i>
            按名称排序
          </button>

          <button
            @click="sortListBy('score')"
            class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-lg transition-colors"
          >
            <i class="i-carbon-sort-ascending mr-2"></i>
            按分数排序
          </button>

          <button
            @click="shuffleList"
            class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-3 rounded-lg transition-colors"
          >
            <i class="i-carbon-shuffle mr-2"></i>
            随机排序
          </button>
        </div>

        <div class="space-y-3">
          <div
            v-for="item in sortedList"
            :key="item.id"
            :style="{ viewTransitionName: `list-item-${item.id}` }"
            class="bg-gray-800 rounded-lg p-4 flex items-center justify-between"
          >
            <div class="flex items-center gap-4">
              <div class="w-12 h-12 rounded-full bg-gradient-to-br from-tech-accent to-blue-500 flex items-center justify-center text-white font-bold">
                {{ item.avatar }}
              </div>
              <div>
                <h4 class="text-white font-semibold">{{ item.name }}</h4>
                <p class="text-gray-400 text-sm">{{ item.role }}</p>
              </div>
            </div>
            <div class="text-right">
              <div class="text-2xl font-bold text-tech-accent">{{ item.score }}</div>
              <div class="text-gray-400 text-sm">分数</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 图片画廊 -->
      <div class="tech-card mb-8">
        <h2 class="text-2xl font-semibold mb-6 text-white">图片画廊过渡</h2>
        
        <div v-if="!selectedImage" class="grid grid-cols-2 md:grid-cols-4 gap-4">
          <div
            v-for="(image, index) in gallery"
            :key="index"
            @click="selectImage(index)"
            class="aspect-square bg-gradient-to-br rounded-lg cursor-pointer hover:scale-105 transition-transform overflow-hidden"
            :class="image.gradient"
            :style="{ viewTransitionName: `gallery-${index}` }"
          >
            <div class="w-full h-full flex items-center justify-center">
              <i :class="image.icon" class="text-6xl text-white"></i>
            </div>
          </div>
        </div>

        <div v-else class="relative">
          <button
            @click="closeImage"
            class="absolute top-4 right-4 z-10 bg-gray-900 bg-opacity-80 hover:bg-opacity-100 text-white w-12 h-12 rounded-full flex items-center justify-center transition-colors"
          >
            <i class="i-carbon-close text-2xl"></i>
          </button>
          
          <div
            :style="{ viewTransitionName: `gallery-${selectedImageIndex}` }"
            class="aspect-video bg-gradient-to-br rounded-lg overflow-hidden"
            :class="gallery[selectedImageIndex].gradient"
          >
            <div class="w-full h-full flex flex-col items-center justify-center p-8">
              <i :class="gallery[selectedImageIndex].icon" class="text-8xl text-white mb-6"></i>
              <h3 class="text-3xl font-bold text-white mb-2">{{ gallery[selectedImageIndex].title }}</h3>
              <p class="text-white text-lg">{{ gallery[selectedImageIndex].description }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 主题切换 -->
      <div class="tech-card mb-8">
        <h2 class="text-2xl font-semibold mb-6 text-white">主题切换动画</h2>
        
        <div 
          :style="{ 
            backgroundColor: themes[currentTheme].bg,
            color: themes[currentTheme].text
          }"
          class="rounded-lg p-8 mb-6 transition-colors duration-300"
        >
          <h3 class="text-3xl font-bold mb-4">{{ themes[currentTheme].name }}</h3>
          <p class="text-lg mb-6">{{ themes[currentTheme].description }}</p>
          
          <div class="flex gap-3">
            <button
              v-for="(theme, key) in themes"
              :key="key"
              @click="switchTheme(key)"
              :style="{ 
                backgroundColor: theme.accent,
                opacity: currentTheme === key ? 1 : 0.6
              }"
              class="px-6 py-3 rounded-lg text-white font-semibold hover:opacity-100 transition-opacity"
            >
              {{ theme.name }}
            </button>
          </div>
        </div>
      </div>

      <!-- 内容切换 -->
      <div class="tech-card mb-8">
        <h2 class="text-2xl font-semibold mb-6 text-white">内容切换动画</h2>
        
        <div class="flex gap-3 mb-6">
          <button
            v-for="tab in tabs"
            :key="tab.id"
            @click="switchTab(tab.id)"
            :class="currentTab === tab.id ? 'bg-tech-accent' : 'bg-gray-700 hover:bg-gray-600'"
            class="px-6 py-3 rounded-lg text-white font-semibold transition-colors"
          >
            <i :class="tab.icon" class="mr-2"></i>
            {{ tab.label }}
          </button>
        </div>

        <div 
          :style="{ viewTransitionName: 'tab-content' }"
          class="bg-gray-800 rounded-lg p-8"
        >
          <div v-if="currentTab === 'profile'">
            <h3 class="text-2xl font-bold text-white mb-4">个人资料</h3>
            <div class="space-y-4 text-gray-300">
              <p><strong>用户名：</strong>Vue Developer</p>
              <p><strong>邮箱：</strong>dev@example.com</p>
              <p><strong>角色：</strong>前端工程师</p>
              <p><strong>加入时间：</strong>2024-01-01</p>
            </div>
          </div>

          <div v-else-if="currentTab === 'settings'">
            <h3 class="text-2xl font-bold text-white mb-4">设置</h3>
            <div class="space-y-4">
              <div class="flex items-center justify-between">
                <span class="text-gray-300">通知</span>
                <label class="relative inline-block w-12 h-6">
                  <input type="checkbox" class="opacity-0 w-0 h-0">
                  <span class="absolute cursor-pointer inset-0 bg-gray-600 rounded-full transition-colors"></span>
                </label>
              </div>
              <div class="flex items-center justify-between">
                <span class="text-gray-300">自动更新</span>
                <label class="relative inline-block w-12 h-6">
                  <input type="checkbox" checked class="opacity-0 w-0 h-0">
                  <span class="absolute cursor-pointer inset-0 bg-tech-accent rounded-full transition-colors"></span>
                </label>
              </div>
              <div class="flex items-center justify-between">
                <span class="text-gray-300">深色模式</span>
                <label class="relative inline-block w-12 h-6">
                  <input type="checkbox" checked class="opacity-0 w-0 h-0">
                  <span class="absolute cursor-pointer inset-0 bg-tech-accent rounded-full transition-colors"></span>
                </label>
              </div>
            </div>
          </div>

          <div v-else-if="currentTab === 'stats'">
            <h3 class="text-2xl font-bold text-white mb-4">统计数据</h3>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
              <div class="bg-gray-900 rounded-lg p-4 text-center">
                <div class="text-3xl font-bold text-blue-400 mb-2">1,234</div>
                <div class="text-gray-400 text-sm">访问量</div>
              </div>
              <div class="bg-gray-900 rounded-lg p-4 text-center">
                <div class="text-3xl font-bold text-green-400 mb-2">567</div>
                <div class="text-gray-400 text-sm">用户</div>
              </div>
              <div class="bg-gray-900 rounded-lg p-4 text-center">
                <div class="text-3xl font-bold text-yellow-400 mb-2">89</div>
                <div class="text-gray-400 text-sm">项目</div>
              </div>
              <div class="bg-gray-900 rounded-lg p-4 text-center">
                <div class="text-3xl font-bold text-purple-400 mb-2">42</div>
                <div class="text-gray-400 text-sm">评论</div>
              </div>
            </div>
          </div>

          <div v-else>
            <h3 class="text-2xl font-bold text-white mb-4">帮助与支持</h3>
            <div class="space-y-4 text-gray-300">
              <div>
                <h4 class="font-semibold text-white mb-2">常见问题</h4>
                <ul class="list-disc list-inside space-y-1">
                  <li>如何开始使用？</li>
                  <li>如何重置密码？</li>
                  <li>如何联系客服？</li>
                </ul>
              </div>
              <div>
                <h4 class="font-semibold text-white mb-2">联系方式</h4>
                <p>邮箱: support@example.com</p>
                <p>电话: 400-123-4567</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 过渡控制 -->
      <div class="tech-card mb-8">
        <h2 class="text-2xl font-semibold mb-6 text-white">过渡控制</h2>
        
        <div class="bg-gray-800 rounded-lg p-6 mb-6">
          <div class="space-y-4">
            <div>
              <label class="text-white font-semibold mb-2 block">过渡持续时间 (ms)</label>
              <input
                v-model.number="transitionDuration"
                type="range"
                min="100"
                max="2000"
                step="100"
                class="w-full"
              >
              <div class="text-gray-400 text-sm mt-1">当前: {{ transitionDuration }}ms</div>
            </div>

            <div>
              <label class="text-white font-semibold mb-2 block">启用视图过渡</label>
              <label class="relative inline-flex items-center cursor-pointer">
                <input
                  v-model="enableTransitions"
                  type="checkbox"
                  class="sr-only peer"
                >
                <div class="w-14 h-7 bg-gray-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[4px] after:bg-white after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-tech-accent"></div>
                <span class="ml-3 text-gray-300">{{ enableTransitions ? '已启用' : '已禁用' }}</span>
              </label>
            </div>
          </div>
        </div>

        <div class="bg-gray-800 rounded-lg p-6">
          <h3 class="text-white font-semibold mb-4">过渡统计</h3>
          <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div>
              <div class="text-gray-400 text-sm mb-1">总过渡次数</div>
              <div class="text-2xl font-bold text-white">{{ transitionCount }}</div>
            </div>
            <div>
              <div class="text-gray-400 text-sm mb-1">成功</div>
              <div class="text-2xl font-bold text-green-400">{{ successCount }}</div>
            </div>
            <div>
              <div class="text-gray-400 text-sm mb-1">跳过</div>
              <div class="text-2xl font-bold text-yellow-400">{{ skipCount }}</div>
            </div>
            <div>
              <div class="text-gray-400 text-sm mb-1">平均时长</div>
              <div class="text-2xl font-bold text-blue-400">{{ averageDuration }}ms</div>
            </div>
          </div>
        </div>
      </div>

      <!-- API 信息 -->
      <div class="tech-card">
        <h3 class="text-xl font-semibold mb-4 text-white">API 信息</h3>
        <div class="space-y-4 text-gray-300">
          <div>
            <h4 class="font-semibold text-tech-accent mb-2">浏览器支持</h4>
            <p>Chrome 111+, Edge 111+（需要实验性功能标志）</p>
            <p class="text-sm mt-1">Firefox 和 Safari 正在开发中</p>
          </div>
          <div>
            <h4 class="font-semibold text-tech-accent mb-2">核心方法</h4>
            <ul class="list-disc list-inside space-y-1">
              <li><code class="bg-gray-800 px-2 py-1 rounded">document.startViewTransition(callback)</code> - 启动视图过渡</li>
              <li><code class="bg-gray-800 px-2 py-1 rounded">transition.ready</code> - 过渡准备就绪的 Promise</li>
              <li><code class="bg-gray-800 px-2 py-1 rounded">transition.finished</code> - 过渡完成的 Promise</li>
              <li><code class="bg-gray-800 px-2 py-1 rounded">transition.skipTransition()</code> - 跳过过渡动画</li>
            </ul>
          </div>
          <div>
            <h4 class="font-semibold text-tech-accent mb-2">CSS 伪元素</h4>
            <ul class="list-disc list-inside space-y-1 text-sm">
              <li><code class="bg-gray-800 px-1 rounded">::view-transition</code> - 过渡容器根元素</li>
              <li><code class="bg-gray-800 px-1 rounded">::view-transition-group(name)</code> - 命名过渡组</li>
              <li><code class="bg-gray-800 px-1 rounded">::view-transition-image-pair(name)</code> - 新旧视图对</li>
              <li><code class="bg-gray-800 px-1 rounded">::view-transition-old(name)</code> - 旧视图快照</li>
              <li><code class="bg-gray-800 px-1 rounded">::view-transition-new(name)</code> - 新视图快照</li>
            </ul>
          </div>
          <div>
            <h4 class="font-semibold text-tech-accent mb-2">view-transition-name 属性</h4>
            <p class="text-sm leading-relaxed">
              通过 CSS 属性 <code class="bg-gray-800 px-1 rounded">view-transition-name</code> 
              可以为元素指定唯一的过渡名称，使元素在状态变化时产生平滑的过渡动画。
            </p>
            <pre class="bg-gray-800 p-3 rounded mt-2 text-sm overflow-x-auto">
.element {
  view-transition-name: my-element;
}</pre>
          </div>
          <div>
            <h4 class="font-semibold text-tech-accent mb-2">使用场景</h4>
            <ul class="list-disc list-inside space-y-1 text-sm">
              <li>单页应用（SPA）的路由切换动画</li>
              <li>列表项的添加、删除、重排序动画</li>
              <li>主题切换的平滑过渡</li>
              <li>图片画廊的展开/收起动画</li>
              <li>模态框、抽屉等组件的显示/隐藏</li>
              <li>数据更新的视觉反馈</li>
              <li>表单步骤切换</li>
            </ul>
          </div>
          <div>
            <h4 class="font-semibold text-tech-accent mb-2">基本用法</h4>
            <pre class="bg-gray-800 p-4 rounded text-sm overflow-x-auto">
<span class="text-gray-500">// 启动视图过渡</span>
<span class="text-blue-400">if</span> (<span class="text-purple-400">document</span>.startViewTransition) {
  <span class="text-purple-400">document</span>.startViewTransition(<span class="text-blue-400">async</span> () => {
    <span class="text-gray-500">// 在这里更新 DOM</span>
    <span class="text-blue-400">await</span> updateDOM();
  });
} <span class="text-blue-400">else</span> {
  <span class="text-gray-500">// 降级处理：直接更新 DOM</span>
  <span class="text-blue-400">await</span> updateDOM();
}</pre>
          </div>
          <div>
            <h4 class="font-semibold text-tech-accent mb-2">自定义动画</h4>
            <pre class="bg-gray-800 p-4 rounded text-sm overflow-x-auto">
<span class="text-gray-500">/* 自定义淡入淡出动画 */</span>
<span class="text-yellow-400">::view-transition-old</span>(<span class="text-green-400">root</span>) {
  <span class="text-blue-400">animation</span>: <span class="text-orange-400">0.3s</span> ease-out fade-out;
}

<span class="text-yellow-400">::view-transition-new</span>(<span class="text-green-400">root</span>) {
  <span class="text-blue-400">animation</span>: <span class="text-orange-400">0.3s</span> ease-in fade-in;
}

<span class="text-yellow-400">@keyframes</span> fade-out {
  <span class="text-blue-400">to</span> { <span class="text-blue-400">opacity</span>: <span class="text-orange-400">0</span>; }
}

<span class="text-yellow-400">@keyframes</span> fade-in {
  <span class="text-blue-400">from</span> { <span class="text-blue-400">opacity</span>: <span class="text-orange-400">0</span>; }
}</pre>
          </div>
          <div>
            <h4 class="font-semibold text-tech-accent mb-2">最佳实践</h4>
            <ul class="list-disc list-inside space-y-1 text-sm">
              <li>始终提供降级方案（检测 API 支持）</li>
              <li>使用唯一的 view-transition-name 避免冲突</li>
              <li>保持动画时长适中（200-500ms）</li>
              <li>避免在过渡期间进行耗时操作</li>
              <li>考虑用户的动画偏好设置（prefers-reduced-motion）</li>
              <li>测试不支持该 API 的浏览器表现</li>
            </ul>
          </div>
          <div>
            <h4 class="font-semibold text-tech-accent mb-2">局限性</h4>
            <ul class="list-disc list-inside space-y-1 text-sm">
              <li>目前仅支持同域页面过渡</li>
              <li>跨页面过渡需要 MPA（Multi-Page Application）支持</li>
              <li>性能受设备和 DOM 复杂度影响</li>
              <li>不适合频繁的小幅更新</li>
            </ul>
          </div>
          <div>
            <h4 class="font-semibold text-tech-accent mb-2">相关资源</h4>
            <ul class="list-disc list-inside space-y-1 text-sm">
              <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API" target="_blank" class="text-tech-accent hover:underline">MDN 文档</a></li>
              <li><a href="https://developer.chrome.com/docs/web-platform/view-transitions/" target="_blank" class="text-tech-accent hover:underline">Chrome 开发者文档</a></li>
              <li><a href="https://caniuse.com/view-transitions" target="_blank" class="text-tech-accent hover:underline">浏览器兼容性</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

// 类型定义
interface Card {
  id: number
  icon: string
  title: string
  description: string
  flipped: boolean
}

interface ListItem {
  id: number
  avatar: string
  name: string
  role: string
  score: number
}

interface GalleryItem {
  icon: string
  gradient: string
  title: string
  description: string
}

interface Theme {
  name: string
  description: string
  bg: string
  text: string
  accent: string
}

interface Tab {
  id: string
  label: string
  icon: string
}

// 响应式状态
const isSupported = ref(false)
const currentColor = ref('#3b82f6')
const currentText = ref('点击下方按钮切换颜色')
const currentState = ref('初始状态')

// 卡片数据
const cards = ref<Card[]>([
  {
    id: 1,
    icon: '🚀',
    title: '性能',
    description: '现代化的视图过渡提供流畅的 60fps 动画，利用 GPU 加速确保最佳性能。',
    flipped: false
  },
  {
    id: 2,
    icon: '🎨',
    title: '美观',
    description: '创建令人印象深刻的用户界面过渡，提升应用的视觉吸引力和用户体验。',
    flipped: false
  },
  {
    id: 3,
    icon: '⚡',
    title: '简单',
    description: '只需几行代码即可实现复杂的过渡效果，无需复杂的动画库或手动计算。',
    flipped: false
  }
])

// 列表数据
const listItems = ref<ListItem[]>([
  { id: 1, avatar: 'A', name: 'Alice Chen', role: '前端开发', score: 95 },
  { id: 2, avatar: 'B', name: 'Bob Wang', role: '后端开发', score: 88 },
  { id: 3, avatar: 'C', name: 'Carol Li', role: 'UI 设计', score: 92 },
  { id: 4, avatar: 'D', name: 'David Zhang', role: '产品经理', score: 85 },
  { id: 5, avatar: 'E', name: 'Eve Liu', role: '测试工程师', score: 90 }
])

const sortedList = ref([...listItems.value])

// 图片画廊
const gallery = ref<GalleryItem[]>([
  { icon: 'i-carbon-mountain', gradient: 'from-blue-500 to-cyan-500', title: '山脉', description: '壮丽的山川景色' },
  { icon: 'i-carbon-sun', gradient: 'from-orange-500 to-yellow-500', title: '日出', description: '清晨的第一缕阳光' },
  { icon: 'i-carbon-moon', gradient: 'from-purple-500 to-pink-500', title: '月夜', description: '宁静的月光之夜' },
  { icon: 'i-carbon-tree', gradient: 'from-green-500 to-emerald-500', title: '森林', description: '茂密的绿色森林' },
  { icon: 'i-carbon-ocean', gradient: 'from-blue-600 to-indigo-600', title: '海洋', description: '广阔无垠的大海' },
  { icon: 'i-carbon-cloud', gradient: 'from-gray-400 to-slate-500', title: '云端', description: '漂浮的白云' },
  { icon: 'i-carbon-fire', gradient: 'from-red-500 to-orange-600', title: '火焰', description: '炽热的火焰' },
  { icon: 'i-carbon-snow', gradient: 'from-blue-100 to-cyan-200', title: '雪景', description: '纯净的冬日雪景' }
])

const selectedImage = ref(false)
const selectedImageIndex = ref(0)

// 主题
const themes = ref<Record<string, Theme>>({
  light: {
    name: '明亮',
    description: '清新明亮的浅色主题，适合白天使用',
    bg: '#f3f4f6',
    text: '#1f2937',
    accent: '#3b82f6'
  },
  dark: {
    name: '暗黑',
    description: '优雅的深色主题，保护您的眼睛',
    bg: '#1f2937',
    text: '#f3f4f6',
    accent: '#8b5cf6'
  },
  ocean: {
    name: '海洋',
    description: '清凉的蓝绿色主题，让人平静放松',
    bg: '#0e7490',
    text: '#f0fdfa',
    accent: '#06b6d4'
  },
  sunset: {
    name: '日落',
    description: '温暖的橙红色主题，充满活力',
    bg: '#c2410c',
    text: '#fff7ed',
    accent: '#fb923c'
  }
})

const currentTheme = ref('dark')

// 标签页
const tabs = ref<Tab[]>([
  { id: 'profile', label: '个人资料', icon: 'i-carbon-user' },
  { id: 'settings', label: '设置', icon: 'i-carbon-settings' },
  { id: 'stats', label: '统计', icon: 'i-carbon-chart-line' },
  { id: 'help', label: '帮助', icon: 'i-carbon-help' }
])

const currentTab = ref('profile')

// 过渡控制
const enableTransitions = ref(true)
const transitionDuration = ref(500)
const transitionCount = ref(0)
const successCount = ref(0)
const skipCount = ref(0)
const totalDuration = ref(0)

const averageDuration = computed(() => {
  return transitionCount.value > 0 
    ? Math.round(totalDuration.value / transitionCount.value) 
    : 0
})

// 初始化
onMounted(() => {
  isSupported.value = 'startViewTransition' in document
})

// 执行视图过渡
const runTransition = async (callback: () => void | Promise<void>) => {
  if (!enableTransitions.value || !isSupported.value) {
    await callback()
    return
  }

  transitionCount.value++
  const startTime = performance.now()

  try {
    const transition = (document as any).startViewTransition(async () => {
      await callback()
    })

    await transition.ready
    successCount.value++
    
    const duration = performance.now() - startTime
    totalDuration.value += duration
  } catch (error) {
    console.error('Transition error:', error)
    skipCount.value++
  }
}

// 颜色过渡
const transitionColor = async (color: string, name: string) => {
  const colorMap: Record<string, string> = {
    red: '#ef4444',
    blue: '#3b82f6',
    green: '#10b981',
    purple: '#8b5cf6'
  }

  await runTransition(() => {
    currentColor.value = colorMap[color]
    currentText.value = `${name}主题`
    currentState.value = name
  })
}

// 翻转卡片
const flipCard = async (cardId: number) => {
  await runTransition(() => {
    const card = cards.value.find(c => c.id === cardId)
    if (card) {
      card.flipped = !card.flipped
    }
  })
}

// 排序列表
const sortListBy = async (key: 'name' | 'score') => {
  await runTransition(() => {
    sortedList.value = [...listItems.value].sort((a, b) => {
      if (key === 'name') {
        return a.name.localeCompare(b.name)
      }
      return b.score - a.score
    })
  })
}

// 随机排序
const shuffleList = async () => {
  await runTransition(() => {
    sortedList.value = [...listItems.value].sort(() => Math.random() - 0.5)
  })
}

// 选择图片
const selectImage = async (index: number) => {
  selectedImageIndex.value = index
  await runTransition(() => {
    selectedImage.value = true
  })
}

// 关闭图片
const closeImage = async () => {
  await runTransition(() => {
    selectedImage.value = false
  })
}

// 切换主题
const switchTheme = async (theme: string) => {
  await runTransition(() => {
    currentTheme.value = theme
  })
}

// 切换标签
const switchTab = async (tabId: string) => {
  await runTransition(() => {
    currentTab.value = tabId
  })
}
</script>

<style scoped>
/* 为不支持 view-transition-name 的浏览器提供降级 */
@supports (view-transition-name: none) {
  /* 视图过渡样式 */
}

/* 自定义过渡动画 */
::view-transition-old(root) {
  animation: 0.3s ease-out fade-out;
}

::view-transition-new(root) {
  animation: 0.3s ease-in fade-in;
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}
</style>

